<template>
  <div class="player" :id="'player'+props.winIndex"></div>
</template>

<script setup name="HkPlayer">
import { ref, nextTick } from 'vue';
const { proxy } = getCurrentInstance();

const emit = defineEmits(['update'])

const player = ref(null);
const playing = ref(false);

const props = defineProps({
  name: String,
  // 地址
  url: String,
  // 序号
  winIndex: {
    type: Number,
    required: true,
  }
});


watch(() => props.url, val => {
  if(val != null){
    playVideo();
  }else{
    closeVideo();
  }  
},{ deep: true, immediate: true });

function closeVideo(){
    if(playing.value ){
        player.value.JS_Stop(props.winIndex).then(
            () => {
                console.info('JS_Stop success');
                // do you want...
            },
            (err) => {
                console.info('JS_Stop failed:', err);
                // do you want...
            }
        );
    }
    emit('close', props.winIndex);
    playing.value = false;
}

function playVideo(){
    if(player.value == null){
        initPlayer();
    }
    player.value.JS_Play( props.url, { playURL: props.url, mode: 0}, props.winIndex).then(
        () => {
            console.info('JS_Play success');
        },
        (err) => {
            closeVideo();
            console.info('JS_Play failed:', err);
        }
    );
}

function initPlayer(){
    console.log('player'+(props.winIndex))
    player.value = new JSPlugin({
        szId: 'player'+(props.winIndex), //需要英文字母开头，唯一性，必填
        szBasePath: '/hkplayer', // 必填,与h5player.min.js的引用目录一致
        bSupporDoubleClickFull: true,//是否支持双击全屏，默认true
    });

    player.value.JS_SetWindowControlCallback({
        windowEventSelect: function (index) {  //插件选中窗口回调
            curIndex = index;
            console.log(index, iErrorCode, oError);
        },
        pluginErrorHandler: function (index, iErrorCode, oError) {  //插件错误回调
            // do you want...
            // 取流失败，流中断等错误都会触发该回调函数，请自行对照错误码表进行判断。
            // 业务上层可在此做一些个性化操作，如：个性化错误信息展示，重新取流等。
            closeVideo();
        },
        windowEventOver: function (index) {  //鼠标移过回调
            // do you want...
        },
        windowEventOut: function (index) {  //鼠标移出回调
            // do you want...
        },
        windowEventUp: function (index) {  //鼠标mouseup事件回调
            // do you want...
        },
        windowFullCcreenChange: function (bFull) {  //全屏切换回调
            // do you want...
        },
        firstFrameDisplay: function (index, iWidth, iHeight) {  //首帧显示回调
            // do you want...
            playing.value = true;
        },
        performanceLack: function () {  //性能不足回调
            // do you want...
        },
        StreamEnd: function (index) {  //回放结束回调,返回对应测窗口id
            console.log('recv  windowsId: '+iWndIndex+' recv streamend');
            // do you want...
            closeVideo();
        },
        InterruptStream: function (iWndIndex, interruptTime) {  //interruptTime为秒级别
            console.log('recv InterruptStream windowsId: '+iWndIndex+' interrupt time:'+interruptTime+'s');
        },
        talkPluginErrorHandler: (iErrorCode, oError) => {  //对讲错误回调
            console.log('recv talkPluginErrorHandler: '+iErrorCode);
        },
    });
}
</script>
<style lang="scss" scoped>
.player {
    width: 100%;
    min-width: 400px;
    min-height: 300px;
    aspect-ratio: 16 / 9;
}
</style>
